<template>
  <div>
    <el-dialog
        v-model="visible"
        :title="title"
        width="30%"
        :close-on-click-modal="false"
        :before-close="handleClose"
        class="group-operate-dialog"
    >
      <div v-loading="loading" class="flex-align-center">
        <div>
          <button @click="showClickIconDropdown" class="group-icon-btn inline-flex-column-center">
            <img :src="getIconPath(data.iconPath)" style="height:85px" class="img-rounded">
            <div class="el-dropdown-top-div">
              <el-dropdown ref="GroupIconDropdownRef" trigger="click" popper-class="group-icon-dropdown">
              <span style="font-size: 14px;">
              {{ $t('loc.pickIcon') }}
                <el-icon>
                  <arrow-down/>
                </el-icon>
              </span>
                <template #dropdown>
                  <el-dropdown-menu style="display: flex;flex-wrap: wrap;overflow-y: auto;height: 400px;width: 500px;">
                    <el-dropdown-item v-for="i in 20"  @click="selectedIcon(i)"><img :src="getIconPath(i)" style="height:85px;"></el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </button>
        </div>
        <div style="flex: 1;margin-left: 55px;">
          <div class="input-label">{{ $t('loc.class') }}</div>
          <el-input v-model="data.name" :placeholder="$t('loc.class')"></el-input>
          <div class="input-label">{{ $t('loc.ageGp') }}</div>
          <el-select style="width: 100%;" v-model="data.stageId">
            <el-option
                v-for="item in stageOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </div>
      </div>
      <template #footer>
      <span class="dialog-footer " :class="operateType === 'adminEdit' && 'flex-align-justify'">
          <el-button :loading="submitLoading" type="danger" v-if="operateType === 'adminEdit'" @click="deleteHandler">删除</el-button>
        <div>
          <el-button @click="handleClose">{{ $t('loc.cancel') }}</el-button>
          <el-button :loading="submitLoading"  type="primary" @click="saveHandler" :disabled="loading">
             {{ $t('loc.save') }}
          </el-button>
        </div>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import GroupApi from "@/api/group";
import { ArrowDown } from '@element-plus/icons-vue'
export default {
  name: "GroupOperateDialog",
  props: ['dialogVisible', 'group', 'operateType'], //edit add
  components: {
    ArrowDown
  },
  data() {
    return {
      loading: false,
      visible: false,
      title: '编辑班级',
      data: {
        stage: {}
      },
      stageOptions: [],
      icons: 20,
      visibleGroupIconDropdown: false,
      submitLoading: false,
    }
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler(newVal) {
        this.visible = newVal
        if (newVal) {
          this.initData()
        }
      },
    },
    operateType: {
      immediate: true,
      handler(newVal) {
        if (newVal === 'adminEdit') {
          this.title = this.$t('loc.editClass')
        }
        if (newVal === 'edit') {
          this.title = this.$t('loc.editClass')
        } else if (newVal === 'add') {
          this.data = {}
          this.title = this.$t('loc.addClass')
        }
      },
    },
  },
  created() {

  },
  methods: {
    initData() {
      GroupApi.getAllGroupStage().then(res => {
      this.stageOptions = res
      })
      this.data = {}
      this.loadGroupDetail(this.group)
    },
    handleClose(needReLoadData) {
      console.log('handleClose', needReLoadData)
      this.visible = false
      this.$emit('update:dialogVisible', this.visible)
      if (needReLoadData === true) {
        this.$emit('needReLoadData')
      }
    },
    showClickIconDropdown () {
      if (!this.visibleGroupIconDropdown) {
        this.$refs.GroupIconDropdownRef.handleOpen()
      } else {
        this.$refs.GroupIconDropdownRef.handleClose()
      }
      this.visibleGroupIconDropdown = !this.visibleGroupIconDropdown
    },
    loadGroupDetail(group) {
      if (group && group.id) {
        this.loading = true
        GroupApi.getGroupByGroupId(group.id).then(res => {
          this.data = res
          this.loading = false
        }).catch((error) => {
          this.$message.error(error.response.data.description)
          this.loading = false
        })
      }
    },
    deleteHandler() {
      this.$confirm(this.$t('loc.cfmAgn'), this.$t('loc.tip'), {
        confirmButtonText: this.$t('loc.done'),
        cancelButtonText: this.$t('loc.cancel'),
        type: 'warning',
      }).then(() => {
        this.submitLoading = true
        GroupApi.deleteGroup(this.data.id).then(() => {
          this.submitLoading = false
          this.handleClose(true)
        }).catch((error) => {
          this.submitLoading = false
          console.log(error)
          this.$message.error(error.response.data.description)
        });
      }).catch(() => {
        this.submitLoading = false
      });
    },
    saveHandler() {
      if (!this.checkData()) {
        return
      }
      // 收集数据
      let params = {
        name: this.data.name.trim(),
        stageId: this.data.stageId,
        iconPath: this.data.iconPath || '1',
        schoolId: this.data.schoolId
      }
      if (this.operateType === 'add') {
        this.submitLoading = true
        params.schoolId = this.group.schoolId
        GroupApi.createGroup(params).then(() => {
          this.submitLoading = false
          this.handleClose(true)
        }).catch((error) => {
          this.submitLoading = false
          this.$message.error(error.response.data.description)
        })
      }
      if (this.operateType === 'edit' || this.operateType === 'adminEdit') {
        this.submitLoading = true
        // 收集数据
        params.id = this.data.id
        GroupApi.updateGroup(params).then(() => {
          console.log('updateGroup')
          this.submitLoading = false
          this.handleClose(true)
        }).catch((error) => {
          console.log(error)
          this.submitLoading = false
          this.$message.error(error.response.data.description)
        })
      }
    },
    checkData() {
      if (!this.data.name || this.data.name.trim() === '') {
        this.$message.error('班级名称不能为空')
        return false
      }
      if (!this.data.stageId) {
        this.$message.error('请选择年龄段')
        return false
      }
      return true
    },
    getIconPath (iconPath) {
      if (!iconPath) {
        iconPath = 1
      }
      return require(`@/assets/img/group/${iconPath}.png`)
    },
    selectedIcon (iconPath) {
      this.data.iconPath = iconPath
      this.$refs.GroupIconDropdownRef.handleClose()
      this.visibleGroupIconDropdown = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid #e5e5e5;

  .el-dialog__title {
    font-size: 24px;
    color: #58666e;
  }
}

/deep/ .el-dialog__footer {
  border-top: 1px solid #e5e5e5;
  padding: 20px;
}

/deep/ .el-dialog {
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
}

.group-operate-dialog {
  .input-label {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #323338 !important;
    font-size: 16px !important;
    font-weight: 400;
  }

  .send-report-option {
    /deep/ .el-select .el-input {
      display: flex;
      width: 100px;
    }
  }
}
/deep/ .el-dropdown__popper {
  min-width: 500px!important;
}
.el-dropdown-top-div {
  /deep/ .el-popper {
    min-width: 500px!important;
  }
}
.el-popper {
  min-width: 500px!important;
}
 .group-icon-dropdown {
  min-width: 500px!important;
}
.group-icon-btn {
  color: #58666e !important;
  background-color: #fff;
  padding: 12px 3px;
  margin-bottom: 0;
  border: 1px solid #0000002e;
  border-radius: 2px;
  transition: opacity .15s linear;
}

.group-icon-btn:active, .group-icon-btn:focus, .group-icon-btn:hover {
  color: #58666e!important;
  background-color: #edf1f2;
  border-color: #c7d3d6;
}
</style>
